<template>
  <view class="ui">
    <view class="block-container" v-for="(service, index) in dataList" :key="index" @click=selectProject(service.service_detail_id)>
      <!-- 上半部分 -->
      <view class="upper">
        <view class="service-name">{{ service.service_name }}</view>
        <view class="service-price">{{ service.service_price }}元</view>
      </view>
      <!-- 分割线 -->
      <view class="divider"></view>
      <!-- 下半部分 -->
      <view class="lower">
        <view class="service-description">{{ service.service_description }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config/config.js'; // 引入全局配置文件
export default {
  data() {
    return {
      dataList: [], // 数据列表
      dataLoading: true, // 数据加载状态
    }
  },
  onLoad(query) {
    // 在页面加载时获取传递过来的参数
    const service_id = query.service_id;

    // 根据参数向数据库发起请求，获取数据
    // 这里使用 setTimeout 模拟异步请求
    setTimeout(() => {
      uni.request({
        url: config.baseURL + `/servicedetails/getByType/${service_id}`,
        method: 'GET',
        success: (res) => {
          this.dataList = res.data.data
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请检查网络连接',
            icon: 'none'
          });
        },
        complete: () => {
          this.dataLoading = false; // 数据加载完成，隐藏加载提示
        }
      });
    }, 1000);
  },
  methods: {
	//带预约项目id进行
	selectProject(service_detail_id){
		if(service_detail_id==10){
			uni.navigateTo({
				url: '/pages/booking/seldoctor/seldoctor?service_detail_id='+service_detail_id, // 参数在 URL 中使用 key=value 的形式传递
			  });
		}else{
			uni.navigateTo({
			url: '/pages/booking/creatappointment/creatappointment?service_detail_id='+service_detail_id, // 参数在 URL 中使用 key=value 的形式传递
		  });
		}
		
	}
  }
}
</script>

<style scoped>
.ui{
	width: 100vw;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.block-container {
  width: 90vw;
  height: 20vh;
  background-color: rgb(0,122,255);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  padding: 10px; /* 内边距 */
  margin-top: 10rpx;
}

.upper,
.lower {
  display: flex;
  align-items: center;
}

.upper {
  justify-content: space-between;
  height: 40%; /* 上半部分占比 */
}

.lower {
  height: 60%; /* 下半部分占比 */
}

.divider {
  width: 100%;
  height: 1px;
  background-color: #eee; /* 分割线颜色 */
}
.service-name,
.service-price{
	font-size: 18px;
	font-weight: bold;
}

.service-description {
  font-size: 12px;
  color: #585656; /* 文字颜色为灰色 */
}
</style>
